<template>
	<view>
		<!-- 详情展示 -->
		<view v-if="detailData">
			
			<view class="header">
				<view class="leftflex">
					<image class="leftImage" :src="img" ></image>
				</view>
				<view class="rightflex">
						<view class="title">{{detailData.venueName}}</view>
						<view class="hdesc">预约场地：{{detailData.locationName}}</view>
						<view class="hdesc">
							预约时间：{{detailData.reservationDate}} {{detailData.reservationPeriod | formatPeriod}}
						</view>
				</view>
			</view>
			<view class="model">
				<u-cell-group>
					<u-cell title="订单状态" :value="status[detailData.orderStatus].title"></u-cell>
				</u-cell-group>
			</view>
			<view class="model">
				<u-cell-group>
					<u-cell title="订单号" :value="detailData.orderId"></u-cell>
					<u-cell title="客户昵称" :value="detailData.nickname"></u-cell>
					<u-cell title="手机号码">
						<view
							slot="value"
							class="u-slot-value"
						>
						<u--text :size="30" mode="link" prefixIcon="phone"  :text="detailData.phoneNum" :href="'tel:' + detailData.phoneNum" ></u--text>
						</view>
					</u-cell>
					<u-cell title="下单时间" :value="detailData.createTime"></u-cell>
					
					<u-cell title="取消时间" :value="detailData.cancelTime" v-if="detailData.status === 3" ></u-cell>
					<u-cell title="取消原因" :label="detailData.cancelContent" v-if="detailData.status === 3" ></u-cell>
					
					<u-cell title="核销时间" :value="detailData.finishTime" v-if="detailData.status === 2" ></u-cell>
					<u-cell title="核销方式" :value="detailData.finishMod === 1 ? '自动核销' : '手动核销'" v-if="detailData.status === 2" ></u-cell>
				</u-cell-group>
			</view>
			<view  class="model">
				<u-cell-group>
					<u-cell title="订单金额" :value="'￥'+detailData.orderAmt"></u-cell>
					<u-cell title="优惠金额" :value="'￥'+detailData.preferentialAmount"></u-cell>
					<u-cell title="支付金额" :value="'￥'+detailData.amt"></u-cell>
					<u-cell title="支付方式" value="微信支付"></u-cell>
				</u-cell-group>
			</view>
			
			<!-- 订单核销 -->
			<view  v-if="detailData.status == 1" style="position: sticky;bottom: 20rpx;padding: 20rpx 30rpx">
				<u-button type="primary" text="订单核销" @click="orderOff(detailData.orderId)" color="#0544ab" customStyle="border-radius: 0rpx;"></u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//详情编号
				detailId: null,
				//详情数据
				detailData: null,
				//场地图片
				img: '',
				//订单状态
				status: {
					0: {
						title: '待付款',
						color: ''
					},
					1: {
						title: '已预约',
						color: ''
					},
					2: {
						title: '已完成',
						color: ''
					},
					3: {
						title: '已取消',
						color: ''
					},
					5: {
						title: '退款中',
						color: ''
					},
					6: {
						title: '已退款',
						color: ''
					},
				}
				
			}
		},
		onLoad(option) {
			this.detailId = option.id;
			this.fetchList();
		},
		methods: {
			// 获取记录
			fetchList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				var params = {};
				//订单编号检索
				params.orderId = this.detailId;
				this.$request({
					url: '/blade-merchant-app/merchant-app/order/order-venue-detail',
					data: params
				}).then(res => {
					setTimeout(() => {
						var detailData = res.data;
						if(detailData){
							var imgArry = detailData.img.split(",");
							if(imgArry.length>0){
								this.img = imgArry[0];
							}
						}
						this.detailData = res.data;
						
						uni.hideLoading();
					}, 100);
				})
			},
			//订单核销
			orderOff(orderId) {
				var that = this;
				uni.showModal({
				   title: '订单核销操作',
				   content: '是否确认核销订单，核销后不可恢复？',
				   showCancel: true,
				   success: function (res) {
					   if (res.confirm) {
							uni.showLoading({
								title: '核销中',
								mask: true
							})
							that.$request({
								url: `/blade-merchant-app/merchant-app/order/order-off`,
								type: 'POST',
								data: {
									orderId: orderId
								}
							}).then(res => {
								setTimeout(()=>{
									uni.hideLoading();
									that.fetchList();
								},100)
							}).catch(err =>{
								uni.hideLoading();
							})
					   }
				   }
				});
			},
		},
		filters: {
			formatPeriod(value) {
				if (value) {
					const list = value?.split('-');
					return `${list[0].substring(0, 5)}-${list[1].substring(0, 5)}`
				}
				return value;
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
		
		.header {
			display: flex;background-color: #ffffff;padding: 20rpx;
			.leftflex {
				width: 200rpx;
				.leftImage {
					width: 200rpx;height: 200rpx;border-radius: 8rpx;
				}
			}
			.rightflex {
				width: 100%;
				padding-left: 30rpx;
				
				.title {
					font-size: 34rpx;line-height: 60rpx;
				}
				.hdesc {
					font-size: 30rpx;color: #303133;line-height: 40rpx;
				}
				
			}
		}
		.model {
			background-color: #ffffff;margin-top: 20rpx;
		}
	}
</style>
